<template>
	<view>
		<view class="edit-item">
			
			<view class="flex align-center">
				<view class="title must">端口号</view>
				<picker class="w-max-100" :range="deviceArr" :value="deviceIndex"
				 @change="pickerChange($event, 'deviceIndex')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{deviceIndex >= 0 ? deviceArr[deviceIndex]: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>
			
			<view class="flex align-center">
				<view class="title must">具体位置</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="address" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">经纬度</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">经度</view>
					<input class="ml-1 edit-font" type="text" v-model="longitude" placeholder="请输入" />
				</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">纬度</view>
					<input class="ml-1 edit-font" v-model="latitude" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center">
				<view class="title must">村庄</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="village" placeholder="请输入" />
				</view>
			</view>
			
			<view class="">
				<view class="title must">备注</view>
				<view class="w-max-100 mt-2">
					<textarea class="textarea" v-model="info" placeholder="请输入..." />
				</view>
			</view>

			<view>
				<view class="flex mb-4 align-center justify-between"><view class="title must">拍照</view><view class="font-sm text-primary" @click="ckslImg">参考示例</view></view>
				<view class="flex flex-wrap clzp-box">
						<!-- 图片 -->
						<view class="img-box mb-2" v-for="(item,index) in images" :key="index">
							<image class="clear-img" @click.stop="clearFile(index)" src="../../static/images/clear-img.png"></image>
							<image mode="aspectFit" :src="item | imgUrl" @click.stop="lookImg(item)"></image>
						</view>
					<view class="mb-2">
						<view class="img-box mb-2">
							<image src="../../static/images/up-img.png" @click="upFileImg()"></image>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="edit-btn" @click="sendType">上传</view>

	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import util from "../../utils/util.js";
	import {
		upFile,url
	} from "../../utils/url.js"
	import {
		postUploadFault
	} from "../../api/user.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				id: 0,
				info: '', //备注
				address: '', // 具体位置
				village: '', // 村庄
				device_number: '', //端口号
				longitude: '', // 经度
				latitude: '', // 纬度
				images: [], //图片
				
				deviceArr: [1,2,3,4,5,6,7,8,9,10],
				deviceIndex: -1
			}
		},
		filters:{
			imgUrl(img) {
				if(img.indexOf('http') != -1) return img;
				if(img.indexOf('http') == -1) return url + img
			}
		},
		onLoad() {
			// #ifdef H5
			// this.init()
			// #endif
			const that = this;
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				isHighAccuracy: true,
				success(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude
				}
			})
		},
		methods: {
			
			// 获取经纬度
			getUserlocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					isHighAccuracy: true,
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude
					}
				})
			},

			async init() {
				this.getUserlocation()
					
				// var res = await postChargePileSelect();
				// if (res.data.code == 1) {
				// 	this.pickerLict = res.data.data
				// }
			},
			

			// picker
			pickerChange(e, key) {
				this[key] = e.detail.value;
				if(key == 'deviceIndex') this.device_number = this.deviceArr[e.detail.value]
			},

			// 上传文件
			upFileImg() {
				util.uploadImageOne({}, res => {
					this.images.push(res.data.url)
				})
			},

			
			// 查看图片
			lookImg(url) {
				if(url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},
			
			// 参考示例
			ckslImg() {
				uni.previewImage({
					current: 0,
					urls: ["https://d-youpin.bigchun.com/assets/image/ck-1.jpg","https://d-youpin.bigchun.com/assets/image/ck-2.jpg","https://d-youpin.bigchun.com/assets/image/ck-3.jpg"]
				})
			},
			
			// 删除图片或视频
			clearFile(index) {
				this.images.splice(index,1)
			},

			//添加充电桩
			async sendType() {
				if(this.images.length == 0) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				uni.showLoading();
				let { device_number, longitude, latitude, images, info, address, village } = this;
				let data = { device_number, longitude, latitude, images: images.join(), info, address, village }
				for(let i in data) {
					if(data[i] == '') return uni.showToast({title: "请填写必填项", icon: 'none'})
				}
				
				data.token = uni.getStorageSync('token');
				
				let res = await postUploadFault(data)
				uni.hideLoading()
				if (res.data.code == 1) {
					uni.showToast({
						title: "上传成功",
						success() {
							setTimeout(() => uni.navigateBack(), 1200)
						}
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}
	
	.img-box video {
		width: 100%;
		height: 100%;
	}

	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

/* 	.clzp-box>view :nth-child(2n+n) {
		margin-right: 0 !important;
	}
 */
	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
	.textarea {
		width: 100%;
		height: 200rpx;
		border: solid 1rpx #F3F3F3;
		font-size: 26rpx;
		padding: 22rpx 25rpx;
		box-sizing: border-box;
	}
</style>
